<template>
  <div>child子组件</div>
  <p>msg:{{msg}}</p>
  <button @click="update">更新</button>
</template>
<script lang="ts">
import {
    ref,
  defineComponent,
  onBeforeMount,
  onBeforeUnmount,
  onBeforeUpdate,
  onMounted,
  onUnmounted,
  onUpdated,
} from "vue";

export default defineComponent({
  beforeCreate() {
    console.log("2.x中的beforeCreate");
  },
  created() {
    console.log("2.x中的created");
  },
  beforeMount() {
    console.log("2.x中的beforeMount");
  },
  mounted() {
    console.log("2.x中的mounted");
  },
  beforeUpdate() {
    console.log("2.x中的beforeUpdate");
  },
  updated() {
    console.log("2.x中的updated");
  },
  beforeUnmount() {
    console.log("2.x中的beforeUnmount");
  },
  unmounted() {
    console.log("2.x中的unmounted");
  },
  setup() {
    console.log("3.x中的setup");
    // 相应式数据
    const msg = ref("abc");
    // 点击按钮
    const update = () => {
      msg.value += "===";
    };
    onBeforeMount(() => {
      console.log("3.x中的onBeforeMount");
    });
    onMounted(() => {
      console.log("3.x中的onMounted");
    });
    onBeforeUpdate(() => {
      console.log("3.x中的onBeforeUpdate");
    });
    onUpdated(() => {
      console.log("3.x中的onUpdated");
    });
    onBeforeUnmount(() => {
      console.log("3.x中的onBeforeUnmount");
    });
    onUnmounted(() => {
      console.log("3.x中的onUnmounted");
    });
    return {
        msg, update
    }
  },
});
</script>
<style scoped>
</style>